<script setup>
import {useForm} from '@inertiajs/vue3'
import {Message} from '@arco-design/web-vue'
import {route} from "ziggy-js"
import {ref} from "vue";
import AuthLayout from "./AuthLayout.vue";

const captchaSrc = ref(`/captcha/merchant_math?t=${Math.random()}`)
const FormRef = ref()
const form = useForm({
    phone: '',
    password: '',
    captcha: '',
    remember: true
})
// 表单验证规则
const rules = {
    phone: [
        {required: true, message: '请输入手机号', trigger: 'blur'},
        {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {minLength: 6, maxLength: 16, message: '请输入密码长度6-16位', tigger: ['blur']},
        {pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, message: '请输入密码必须包含字母和数字', tigger: ['blur']}
    ],
    captcha: [{required: true, message: '请输入图形验证码',tigger: ['blur']}],
}

const reloadCaptcha = () => {
    captchaSrc.value = `/captcha/merchant_math?t=${Math.random()}`;
}

const handleSubmit = () => {
    form.post(route('merchant.login'), {
        onSuccess: () => {
            Message.success('登录成功')
        },
        onError: (errors) => {
            console.log(errors)
            reloadCaptcha()
            const fields = {};
            // 遍历所有错误
            for (const [fieldName, messages] of Object.entries(errors)) {
                // 构造字段对象
                fields[fieldName] = {
                    status: 'error',
                    message: messages
                };
            }
            FormRef.value.setFields(fields);
        }
    })
}

onMounted(() => {
    captchaSrc.value = `/captcha/merchant_math?t=${Math.random()}`;
})
</script>

<template>
    <auth-layout>
        <!-- 登录表单 - 使用 Arco Form 组件 -->
        <div class="flex flex-col justify-between select-none">
            <h3 class="text-2xl font-serif font-bold text-black">
                欢迎回来
            </h3>
        </div>

        <div class="flex-1 flex flex-col gap-8 items-center justify-center">
            <a-tabs class="w-full " default-active-key="3" hide-content>
                <a-tab-pane key="1" title="微信" />
                <a-tab-pane key="2" title="账号密码" />
                <a-tab-pane key="3" title="验证码" />
            </a-tabs>
            <a-form
                ref="FormRef"
                :model="form"
                :rules="rules"
                layout="vertical"
            >
                <a-form-item
                    :hide-label="true"
                    field="phone"
                >
                    <a-input
                        v-model="form.phone"
                        allow-clear
                        autocomplete="off"
                        placeholder="请输入你的手机号"
                    >
                        <template #prefix>
                            <icon-mobile/>
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item
                    :hide-label="true"
                    field="password"
                >
                    <a-input-password
                        v-model="form.password"
                        allow-clear
                        autocomplete="off"
                        placeholder="请输入你的密码"
                    >
                        <template #prefix>
                            <icon-lock/>
                        </template>
                    </a-input-password>
                </a-form-item>
                <a-form-item
                    :hide-label="true"
                    field="captcha"
                >
                    <div class="flex items-center w-full gap-3">
                        <a-input
                            v-model="form.captcha"
                            allow-clear
                            autocomplete="off"
                            class="flex-1"
                            placeholder="请输入图形验证码"

                        >
                            <template #prefix>
                                <icon-safe/>
                            </template>
                        </a-input>
                        <div class="w-[120px] h-[32px]" @click="reloadCaptcha">
                            <img :src="captchaSrc" alt="图形验证码"/>
                        </div>
                    </div>
                </a-form-item>

                <a-form-item>
                    <a-button
                        :loading="form.processing"
                        long
                        type="primary"
                        @click="handleSubmit"
                    >
                        登录/注册
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </auth-layout>
</template>

<style lang="scss" scoped>
/* Arco 组件样式调整 */

</style>


